<template>
    <div class="bar-container">
        <div :id="id" :style="{ height, width }"></div>
    </div>
</template>

<script setup name="RadarChart">
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
const props = defineProps({
    id: {
        type: String,
        default: "barChart",
    },
    width: {
        type: String,
        default: "500px",
        required: true,
    },
    height: {
        type: String,
        default: "500px",
        required: true,
    },
    chartData: {
        type: Array,
        required: true
    }
})
/** Data */
const chart = ref(null);


onMounted(() => {
    // chartSetOptions(props.chartData)
})
onBeforeUnmount(() => {
    if (!chart.value) {
        return
    }
    chart.value.dispose()
    chart.value = null
    console.log("onBeforeUnmount",chart)
});
/** watch*/
watch(() => props.chartData, (newValue, oldValue) => {
        console.log('watch')
        chartSetOptions(newValue)
    }
)
// function initChart() {
//     chartSetOptions(props.chartData)
// }
function chartSetOptions(data) {
    chart.value = markRaw(echarts.init(document.getElementById('barChart')))
    if(data.length ==0) {
        chart.value.dispose()
        chart.value = null
        return
    }
    let xData = data.map(v=>{
        return v.category
    })
    let nameList = data[0].resultStatisticsHistogramVOList.map(v=>{
        return v.reviewedPersonName
    })
    let seriesList = data.map(v=>{
        return {
            name: v.category,
            type: 'bar',
            stack:"Search Engine",
            barWidth: 30,
            axisLabel: {
                //y轴每个刻度都加单位
                formatter: "{value}分",
            },
            data:  v.resultStatisticsHistogramVOList.map(k=>{
                return Number(k.categoryScore)
            })
        }
    })
    console.log('xData',xData ,'nameList',nameList ,'seriesList',seriesList)
    chart.value.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top: 50,
            left: 10,
            right: 10,
            bottom: 10,
            containLabel: true
        },
        legend: {
            data: xData,
            top: 20
        },
        tooltip: {
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: '#fff', // 悬浮框背景色
            formatter: (data) => {
                return data.seriesName + '：'+ data.value + "分"
            }
        },
        xAxis: [{
            type: 'category',
            data: nameList,
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            }
        }],
        series: seriesList

    })
}
</script>

<style lang="less" scoped>
.bar-container {
}
</style>
